<template>
  <div class="main">
    <el-row :gutter="24">
      <el-col :span="6" v-for="(item, index) in totalData" :key="index">
        <div class="total-container">
          <div class="head">
            <div class="head-left">
              <div class="title">{{ item.title }}</div>
              <div class="value">
                <CountTo
                  :startVal="0"
                  :endVal="Number(item.value)"
                  :duration="2000"
                />
              </div>
            </div>
            <div class="head-right">
              <img :src="item.img" alt="" />
            </div>
          </div>
          <!-- <div class="bottom">
            <div class="bottom-left">
              <div>环比</div>
              <div
                ><img
                  :src="item.value1 > item.value2 ? item.upImg : item.downImg"
                  alt=""
              /></div>
            </div>
            <div class="bottom-right">
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                :percentage="70"
              ></el-progress>
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                :percentage="70"
              ></el-progress>
            </div>
          </div> -->
        </div>
      </el-col>
    </el-row>
    <div class="middle">
      <div class="head">
        <div class="title">项目成果汇总</div>
        <div class="button-container">
          <div
            :class="[
              'button',
              clickParams.scope == 'day' ? 'button-checked' : '',
            ]"
            @click="changeClick('day')"
            >今日</div
          >
          <div
            :class="[
              'button',
              clickParams.scope == 'month' ? 'button-checked' : '',
            ]"
            @click="changeClick('month')"
            >本月</div
          >
          <div
            :class="[
              'button',
              clickParams.scope == 'year' ? 'button-checked' : '',
            ]"
            @click="changeClick('year')"
            >全年</div
          >
        </div>
      </div>
      <div class="charts-main">
        <echarts-component :chart-options="projectResults"></echarts-component>
      </div>
    </div>
    <div class="bottom">
      <el-row :gutter="24">
        <el-col :span="24">
          <div class="middle">
            <div class="head">
              <div class="title">文章访问量排名</div>
              <div class="button-container">
                <div
                  :class="[
                    'button',
                    NewsRankRankParams.scope == 'day' ? 'button-checked' : '',
                  ]"
                  @click="changeNewsRankRank('day')"
                  >今日</div
                >
                <div
                  :class="[
                    'button',
                    NewsRankRankParams.scope == 'month' ? 'button-checked' : '',
                  ]"
                  @click="changeNewsRankRank('month')"
                  >本月</div
                >
                <div
                  :class="[
                    'button',
                    NewsRankRankParams.scope == 'year' ? 'button-checked' : '',
                  ]"
                  @click="changeNewsRankRank('year')"
                  >全年</div
                >
              </div>
            </div>
            <div class="charts-main">
              <echarts-component
                :chart-options="articleData"
              ></echarts-component>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import EchartsComponent from './charts.vue'
import CountTo from 'vue-count-to'
import {
  getJournalRank,
  getNewsRank,
  getSum,
  getClick,
} from '@/api/admin/system/dataStatistics.js'
import { number } from 'echarts/lib/export'
export default {
  components: {
    EchartsComponent,
    CountTo,
  },
  created() {
    this.getJournalRank()
    this.getNewsRank()
    this.getSum()
    this.getClick()
  },
  data() {
    return {
      totalData: [
        {
          title: '浏览数',
          value: '1',
          img: require('@/assets/admin/systeam/dataStatistics/project.png'),
        },
        {
          title: '来访ip数',
          value: '2',
          img: require('@/assets/admin/systeam/dataStatistics/ip.png'),
        },
        {
          title: '书籍总量',
          value: '3',
          img: require('@/assets/admin/systeam/dataStatistics/warning.png'),
        },
        {
          title: '文章总量',
          value: '4',
          img: require('@/assets/admin/systeam/dataStatistics/success.png'),
        },
      ],
      projectResults: {
        color: ['#FA9600', '#0C61B5'],
        legend: {},
        xAxis: {
          type: 'category',
          axisLine: {
            //x轴线样式
            show: true,
            lineStyle: {
              color: '#CED4DB',
            },
          },
          axisLabel: {
            //x轴文字样式
            color: '#2F3133',
          },
          data: [],
        },
        yAxis: {
          type: 'value',
          axisLine: {
            //y轴线样式
            show: true,
            lineStyle: {
              color: '#CED4DB',
            },
          },
          axisLabel: {
            //y轴文字样式
            color: '#8D9094',
          },
        },
        series: [
          {
            name: '浏览量',
            label: {
              show: true,
            },
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FA9600', // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: 'RGBA(250, 150, 0, 0)', // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            data: [],
            type: 'line',
            z: 1,
          },
          {
            name: 'ip数量',
            label: {
              show: true,
              position:"right",
              offset :[-2,-5],
            },
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#0C61B5', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'RGBA(12, 97, 181, 0)', // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            data: [],
            type: 'line',
            z: 2,
          },
        ],
      },
      columnData: {
        color: ['#C5C5C5', '#C5C5C5', '#0C61B5', '#0C61B5', '#0C61B5'],
        grid: {
          left: '50',
          right: '0',
          bottom: '0',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            color: '#8D9094',
          },
          axisLine: { show: true, lineStyle: { shadowOffsetX: -50 } },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        yAxis: [
          {
            type: 'category',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              color: '#8D9094',
              align: 'right',
              verticalAlign: 'middle',
              formatter: (params, index) => {
                let arr = []
                switch (index) {
                  case 0:
                    arr[0] = '{style4|' + params + '}'
                    break
                  case 1:
                    arr[0] = '{style4|' + params + '}'
                    break
                  case 2:
                    arr[0] = '{style3|' + params + '}'
                    break
                  case 3:
                    arr[0] = '{style2|' + params + '}'
                    break
                  case 4:
                    arr[0] = '{style1|' + params + '}'
                    break
                }
                return arr
              },
              rich: {
                style1: {
                  padding: 5,
                  width: 16,
                  align: 'center',
                  height: 16,
                  fontSize: 16,
                  borderRadius: 100,
                  color: '#ffffff',
                  backgroundColor: '#EB5757',
                },
                style2: {
                  padding: 5,
                  align: 'center',
                  width: 16,
                  height: 16,
                  fontSize: 16,
                  borderRadius: 100,
                  color: '#ffffff',
                  backgroundColor: '#F2994A',
                },
                style3: {
                  padding: 5,
                  align: 'center',
                  width: 16,
                  height: 16,
                  fontSize: 16,
                  borderRadius: 100,
                  color: '#ffffff',
                  backgroundColor: '#F2C94C',
                },
                style4: {
                  padding: 5,
                  align: 'center',
                  width: 16,
                  height: 16,
                  fontSize: 16,
                  borderRadius: 100,
                  color: '#ffffff',
                  backgroundColor: '#BDBDBD',
                },
              },
            },
            data: ['5', '4', '3', '2', '1'],
          },
          {
            type: 'category',
            position: 'left',
            offset: 50,
            axisTick: { show: false },
            triggerEvent: true,
            axisLabel: {
              color: '#8D9094',
              // 文字省略
              formatter: function (value) {
                if (value.length > 3) {
                  return `${value.slice(0, 7)}...`
                }
                return value
              }
            },
            data: [],
          },
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            colorBy: 'data',
            barWidth: 20,
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: [],
          },
        ],
      },
      articleData: {
        color: ['#C5C5C5', '#C5C5C5', '#0C61B5', '#0C61B5', '#0C61B5'],
        grid: {
          left: '50',
          right: '0',
          bottom: '0',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            color: '#8D9094',
          },
          axisLine: { show: true, lineStyle: { shadowOffsetX: -50 } },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        yAxis: [
          {
            type: 'category',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              color: '#fff',
              align: 'right',
              verticalAlign: 'middle',
              formatter: (params, index) => {
                let arr = []
                switch (index) {
                  case 0:
                    arr[0] = '{style4|' + params + '}'
                    break
                  case 1:
                    arr[0] = '{style4|' + params + '}'
                    break
                  case 2:
                    arr[0] = '{style3|' + params + '}'
                    break
                  case 3:
                    arr[0] = '{style2|' + params + '}'
                    break
                  case 4:
                    arr[0] = '{style1|' + params + '}'
                    break
                }
                return arr
              },
              rich: {
                style1: {
                  padding: 5,
                  width: 16,
                  align: 'center',
                  height: 16,
                  fontSize: 16,
                  borderRadius: 100,
                  color: '#ffffff',
                  backgroundColor: '#EB5757',
                },
                style2: {
                  padding: 5,
                  align: 'center',
                  width: 16,
                  height: 16,
                  fontSize: 16,
                  borderRadius: 100,
                  color: '#ffffff',
                  backgroundColor: '#F2994A',
                },
                style3: {
                  padding: 5,
                  align: 'center',
                  width: 16,
                  height: 16,
                  fontSize: 16,
                  borderRadius: 100,
                  color: '#ffffff',
                  backgroundColor: '#F2C94C',
                },
                style4: {
                  padding: 5,
                  align: 'center',
                  width: 16,
                  height: 16,
                  fontSize: 16,
                  borderRadius: 100,
                  color: '#ffffff',
                  backgroundColor: '#BDBDBD',
                },
              },
            },
            data: ['5', '4', '3', '2', '1'],
          },
          {
            type: 'category',
            position: 'left',
            offset: 50,
            axisLabel: {
              color: '#8D9094',
               // 文字省略
              formatter: function (value) {
                if (value.length > 3) {
                  return `${value.slice(0, 7)}...`
                }
                return value
              }
            },
            triggerEvent: true,
            axisTick: { show: false },
            data: [],
          },
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            colorBy: 'data',
            barWidth: 20,
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: [],
          },
        ],
      },
      journalRankParams: {
        scope: 'month',
        opt: 'click',
        page: 1,
        limit: 5,
      },
      NewsRankRankParams: {
        scope: 'month',
        opt: 'click',
        page: 1,
        limit: 5,
      },
      clickParams: { scope: 'month' },
    }
  },
  methods: {
    getJournalRank() {
      getJournalRank(this.journalRankParams).then((res) => {
        if (res.data.code == 0) {
          const data = res.data.data.sort((a, b) => a.clickNum - b.clickNum)
          let names = []
          let values = []
          data.forEach((item, index) => {
            names.push(item.name)
            // values.push(Number(item.clickNum))
            let obj
            if (index < 3) {
              obj = {
                value: Number(item.clickNum),
                itemStyle: {
                  color: '#C5C5C5',
                },
              }
              values.push(obj)
            } else {
              obj = {
                value: Number(item.clickNum),
                itemStyle: {
                  color: '#0C61B5',
                },
              }
              values.push(obj)
            }
          })
          this.columnData.yAxis[1].data = [...names]
          this.columnData.series[0].data = [...values]
          if (values.length < 5) {
            let map = []
            values.forEach((item, index) => {
              map.push(index + 1)
            })
            this.columnData.yAxis[0].data = map.reverse()
          } else {
            this.columnData.yAxis[0].data = ['5', '4', '3', '2', '1']
          }
        }
      })
    },
    getNewsRank() {
      getNewsRank(this.NewsRankRankParams).then((res) => {
        if (res.data.code == 0) {
          const data = res.data.data.sort((a, b) => a.clickCount - b.clickCount)
          let names = []
          let values = []
          data.forEach((item, index) => {
            names.push(item.title)
            // values.push(Number(item.clickCount))
            let obj
            if (index < 3) {
              obj = {
                value: Number(item.clickCount),
                itemStyle: {
                  color: '#C5C5C5',
                },
              }
              values.push(obj)
            } else {
              obj = {
                value: Number(item.clickCount),
                itemStyle: {
                  color: '#0C61B5',
                },
              }
              values.push(obj)
            }
          })
          this.articleData.yAxis[1].data = [...names]
          this.articleData.series[0].data = [...values]
          if (values.length < 5) {
            let map = []
            values.forEach((item, index) => {
              map.push(index + 1)
            })
            this.articleData.yAxis[0].data = map.reverse()
          } else {
            this.articleData.yAxis[0].data = ['5', '4', '3', '2', '1']
          }
        }
      })
    },
    getSum() {
      getSum().then((res) => {
        if (res.data.code == 0) {
          let map = ['clickNum', 'ipNum', 'jounalNum', 'newsNum']
          map.forEach((item, index) => {
            this.totalData[index].value = res.data.data[0][item]
          })
        }
      })
    },
    getClick() {
      getClick(this.clickParams).then((res) => {
        if (res.data.code == 0) {
          const click = res.data.data[0].click
          const ip = res.data.data[0].ip
          let clickMap = []
          let ipMap = []
          let month = []
          click.forEach((item, index) => {
            clickMap.push(Number(item.num))
            month.push(item.formatTime)
          })
          ip.forEach((item, index) => {
            ipMap.push(Number(item.num))
          })
          this.projectResults.xAxis.data = [...month]
          this.projectResults.series[0].data = [...clickMap]
          this.projectResults.series[1].data = [...ipMap]
          if (month.length == 1) {
            this.projectResults.series[0].data = [...clickMap, 0]
            this.projectResults.series[1].data = [...ipMap, 0]
          }
        }
      })
    },
    changeClick(val) {
      this.clickParams.scope = val
      this.getClick()
    },
    changeJournalRank(val) {
      this.journalRankParams.scope = val
      this.getJournalRank()
    },
    changeNewsRankRank(val) {
      this.NewsRankRankParams.scope = val
      this.getNewsRank()
    },
  },
}
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.main {
  // width: 100%;
  height: 100%;
  padding: 24px;
  background: #f5f7fa;
  .total-container {
    // width: 280px;
    // height: 152px;
    margin-bottom: 24px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.1);
    .head {
      display: flex;
      justify-content: space-between;
      padding: 18px 24px 22px 24px;
      .head-left {
        .title {
          font-size: 14px;
          font-weight: 400;
          color: #2f3133;
        }
        .value {
          font-size: 32px;
          font-weight: bold;
        }
      }
    }
    .bottom {
      display: flex;
      background: #f9f9f9;
      padding: 10px 24px;
      .bottom-left {
        margin-right: 10px;
      }
      .bottom-right {
        width: 85%;
      }
    }
  }
  .el-col-6:first-child .total-container {
    .value {
      color: #19b21e;
    }
  }
  .el-col-6:nth-child(2) .total-container {
    .value {
      color: #0d6ce4;
    }
  }
  .el-col-6:nth-child(3) .total-container {
    .value {
      color: #fa9600;
    }
  }
  .el-col-6:last-child .total-container {
    .value {
      color: #3adbe0;
    }
  }

  .middle {
    height: 305px;
    background: #ffffff;
    margin-bottom: 24px;
    padding: 14px 16px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    .head {
      height: 40px;
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 14px;
        font-weight: 600;
        color: #18191a;
        border-left: 4px solid #0c61b5;
        height: 12px;
        line-height: 12px;
        padding-left: 11px;
      }
      .button-container {
        width: 128px;
        height: 32px;
        background: #eef1f5;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        padding: 4px;
        display: flex;
        .button {
          width: 33%;
          line-height: 24px;
          font-size: 12px;
          font-weight: 400;
          color: #2f3133;
          text-align: center;
          cursor: pointer;
          border-radius: 4px 4px 4px 4px;
          &:hover {
            border: 1px solid #0c61b5;
          }
        }
        .button-checked {
          background: #ffffff;
        }
      }
    }
    .charts-main {
      height: calc(100% - 40px);
    }
  }
}
</style>>
